<template>
  <div style="position: relative">
    <router-header title="商机立项"></router-header>
    <div class="main">
      <el-row :gutter="20">
        <el-form :model="detailData" size="mini" label-position="right">
          <el-col :span="24" class="clue-title" style="display: block">
            商机基本信息
            <span style="font-size: 14px; color: #aaaaaa; margin-left: 10px"
              >商机编号 {{ detailData.oppoCode }}</span
            ></el-col
          >
          <el-col :span="12">
            <el-form-item label="企业名称：">{{
              detailData.custName
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业联系人：">
              <span>{{ detailData.contacts }}</span>
              <span style="margin-left: 10px">{{ detailData.telephone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务类型：">{{
              detailData.businessTypeName
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在地区：">{{
              detailData.oppoDistrictName
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计合同金额(万)：">{{
              detailData.contractAmount
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计成交日期：">{{
              detailData.tradingDate
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商机来源：">{{
              detailData.oppoSource
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目概况：">{{
              detailData.businessProfile
            }}</el-form-item>
          </el-col>
          <el-col :span="24" class="line"></el-col>
        </el-form>
        <el-col
          :span="24"
          class="clue-title"
          style="display: block; margin-bottom: 15px"
        >
          商机立项信息
        </el-col>
        <el-form
          :model="addInfo"
          label-position="right"
          label-width="120px"
          ref="addInfo"
          :rules="rules"
        >
          <el-col :span="24">
            <el-form-item label="商机情况说明：" prop="descriptionOppo">
              <el-input
                v-model="addInfo.descriptionOppo"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目负责人：" prop="projectLeader">
              <el-select
                v-model="addInfo.projectLeader"
                filterable
                remote
                reserve-keyword
                :remote-method="remoteMethod"
                :loading="executorLoading"
                style="display: block"
                class="multiple-select"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.showName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同负责人：" prop="personChargeContract">
              <el-select
                v-model="addInfo.personChargeContract"
                filterable
                remote
                reserve-keyword
                :remote-method="remoteMethod"
                :loading="executorLoading"
                style="display: block"
                class="multiple-select"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.showName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="抄送：">
              <approver
                v-if="addInfo.winCcPeopleList"
                :isCc="true"
                :approverList="addInfo.winCcPeopleList"
                @handleChooseapprover="handleChooseWinCcPeopleList"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div style="text-align: right">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { BusinessOpportunities } from '@/api/commercial.js';
import { SystemController } from '@/api';
import approver from '../Projects/components/approver';
export default {
  data () {
    return {
      executorLoading: false,
      userList: [],
      oppoId: this.$route.query.oppoId,
      detailData: {},
      businessType: [],
      addInfo: {
        winCcPeopleList: []
      },
      winCcPeopleList: [], // 抄送人list
      rules: {
        descriptionOppo: [{ required: true, message: '请输入商机情况说明', trigger: 'blur' }],
        projectLeader: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }],
        personChargeContract: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }]
      }
    };
  },
  created () {
    // this.remoteMethodCc()
    this.loadCluedetail();
    this.remoteMethod()
  },
  components: {
    approver
  },
  methods: {
    handleChooseWinCcPeopleList (data) {
      data = data.map(v => v.userId);
      this.winCcPeopleList = data;
    },
    // 任务执行人搜索
    remoteMethod (query) {
      this.executorLoading = true;
      SystemController.getUserList(this, {
        orderParam: [{ asc: false, fieldName: 'showName' }],
        pageParam: {
          pageNum: 1,
          pageSize: 30
        },
        sysUserDtoFilter: { showName: query }
      })
        .then((res) => {
          this.userList = res.data.dataList;
          this.executorLoading = false;
        })
        .catch((e) => {
          this.executorLoading = false;
        });
    },
    // 抄送人搜索
    remoteMethodCc () {
      BusinessOpportunities.selectDivision(this, {})
        .then((res) => {
          this.winCcPeopleList = res.data.dataList;
        })
        .catch((e) => {
        });
    },
    // 查询商机基本信息
    loadCluedetail () {
      let params = this.oppoId;
      return new Promise((resolve, reject) => {
        BusinessOpportunities.detail(this, params)
          .then((res) => {
            this.businessType = res.data.businessType.split(',');
            res.data.oppoDistrictCode = Number(res.data.oppoDistrictCode);
            this.detailData = res.data;
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 确认提交
    submitForm () {
      this.$refs['addInfo'].validate((valid) => {
        if (valid) {
          BusinessOpportunities.winDistributionOppo(this, {
            ...this.addInfo,
            winCcPeopleList: this.winCcPeopleList,
            id: this.oppoId
          }).then((res) => {
            if (res.success) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.onClose();
              // this.taskDialog = false;
              // this.getTaskList();
            }
          });
        }
      });
    },
    // 关闭当前页面按钮
    onClose () {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  box-sizing: border-box;
}
.clue-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 10px;
}
</style>
